import React, {memo,useCallback,useEffect,useRef,useState} from 'react'
// 2. 功能性东西
import { shallowEqual, useDispatch, useSelector } from 'react-redux'

import { Carousel } from 'antd';
import { BannerControl, BannerLeft, BannerRight, BannerWrapper } from './style'
import { getTopBannersAction } from '../../store/actionCreator'
 

function TopBanners() {

  const [currentIndex,setCurrentIndex]  = useState(0)

  const dispatch = useDispatch()

  const { topBanners }= useSelector(
    state =>({
      topBanners:state.getIn(['recommend', 'topBanners'])
    }),
    shallowEqual
  )

  const bannerRef = useRef()

  useEffect(() => {
    dispatch(getTopBannersAction())
   
  }, [dispatch])

  const bannerChange = useCallback(
    (from,to) => {
      setCurrentIndex(to)
    },[]
  )

    const bgImage = 
      topBanners &&
      topBanners[currentIndex] &&
      topBanners[currentIndex].imageUrl + '?imageView&blur=40x20'
      
  return(
    <BannerWrapper  bgImage={bgImage}>
      <div className="banner w980">
        <BannerLeft>
          <Carousel 
            effect="fade"
            autoplay={true}
            ref={bannerRef}
            beforeChange={bannerChange}
          >
            {topBanners&&topBanners.map((item,index)=>{
                return (
                  <div key={item.imageUrl}>
                    <img src={item.imageUrl} alt={item.typeTitle} />
                  </div>
                )
              })
            }
          </Carousel>
        </BannerLeft>
        <BannerRight />
        <BannerControl>
          <button
            className="btn"
            onClick={() => bannerRef.current.prev()}
          ></button>
          <button
            className="btn"
            onClick={() => bannerRef.current.next()}
          ></button>
        </BannerControl>
      </div>
    </BannerWrapper>
    
  )
}

export default memo(TopBanners)